<template>
  <div class="modifypassword">
    <Top title="修改密码" iconShow="1"></Top>
    <div class="modify">
      <div class="modify-old">
        <input type="password" placeholder="请输入旧密码" v-model="postData.oldPassword" />
      </div>
      <div class="modify-new">
        <input type="password" placeholder="请输入6~16位字符密码" v-model="postData.newPassword" />
      </div>
      <div class="modify-again">
        <input type="password" placeholder="请再次输入密码" v-model="postData.newPasswordA" />
      </div>
      <mt-button type="primary" @click="modifyPassword">修改密码</mt-button>
      <p class="modify-forget">忘记密码？
        <a @click="findPassword">点击找回</a>
      </p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'modifypassword',
  components: { Top },
  data() {
    return {
      postData: {
        oldPassword: '',
        newPassword: '',
        newPasswordA: ''
      }
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
  },
  methods: {
    modifyPassword() {
      var token = commons.getCookie('token');
      // 判断两次密码输入是否一致
      if (this.postData.newPassword != this.postData.newPasswordA) {
        MessageBox.alert('两次密码输入不一致~', '提示');
        return 
      } else if (!(/[0-9a-zA-Z]{6,16}/.test(this.postData.newPassword))) {//   /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        MessageBox.alert('密码长度必须6-16位', '提示');
        return
      } else {
        // 修改密码穿参
        let postData = {
          oldPwd: this.postData.oldPassword,
          newPwd: this.postData.newPassword,
          token: token
        }
        Indicator.open('加载中...')
        // 调用修改密码接口
        this.$http.post("/loansupermarket-app/user/modifyPwd", postData)
          .then((response) => {
            setTimeout(function () {
              Indicator.close();
            }, 500)
            var resBody = response.body;
            // console.log(resBody)
            if (resBody.code == '000') {
              // 密码修改成功后，跳转到登录界面
              MessageBox.alert('密码修改成功').then(action => {
                // this.$router.go(-1);
                window.history.go(-1);
              });
            } else {
              MessageBox.alert(resBody.mesg,'提示')
            }
          })
      }
    },
    findPassword() {
      // this.$router.push({ path: '/forgetpassword' })
      window.location.href='../user/forgetPassword.html';
    }
    
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.modify {
  box-sizing: border-box;
  padding: 1.6rem 0.4rem;
  &-old,
  &-new,
  &-again {
    margin-top: 0.4rem;
    line-height: 1.33rem;
    text-align: left;
    width: 100%;
    height: 1.33rem;
    background: #fff;
    box-sizing: border-box;
    padding: 0 0.6rem;
    border-radius: 4px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    input {
      width: 100%;
      height: 80%;
      line-height: 0.8rem;
      outline: none;
      border: none;
    }
  }
  .mint-button {
    width: 100%;
    height: 1.2rem;
    font-size: 0.42rem;
    margin-top: 1.06rem;
  }
  &-forget {
    margin-top: 0.6rem;
    font-size: 0.34rem;
    a {
      color: #48d8db;
      text-decoration: underline;
    }
  }
}

</style>
